<!--  -->
<template>
<div class=''>
                <!-- 岗位table -->
    <el-table
    :height="height"
    :data="postInfo"
    v-infinite-scroll="load"
    border
    style="width: 100%">
        <!-- 查看详情 -->
    <el-table-column
     label="详情"
      width="50">
      <template slot-scope="scope">
        <el-button  size="mini" icon="el-icon-arrow-right"  @click="showDetil(scope.row)" circle></el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="标号"
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      prop="name"
      label="岗位名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="companyName"
      label="公司名称"
      width="120">
      <template slot-scope="scope">
        <router-link :to="{path:'/company',query:{companyName:scope.row.companyName}}">
                    {{scope.row.companyName}}
                  </router-link>
      </template>
    </el-table-column>
    <el-table-column
      prop="experience"
      label="经验要求"
      width="100">
    </el-table-column>
    <el-table-column
      prop="qualification"
      label="学历要求"
      width="100">
    </el-table-column>
    <el-table-column
      prop="address"
      label="工作地址"
      width="200">
    </el-table-column>
    <el-table-column
      label="薪水"
      width="150">
      <template slot-scope="scope">
        {{ scope.row.salaryFrom + "-" + scope.row.salaryTo + "每"+scope.row.way}}
      </template>
    </el-table-column>
    <el-table-column
      prop="lastTime"
      column-key="lastTime"
      label="截止时间"
      sortable
      width="150">
    </el-table-column>
    <el-table-column
      prop="postLab"
      label="标签"
      width="270"
      :filters="lab"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag  v-for="(item, index) in scope.row.postLab" :key="index"
          :type= "(index)% 2 === 1 ? 'primary' : 'success'"
          disable-transitions>{{item}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button v-if="rid ===3||rid===1"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button v-else
          size="mini"
          type="danger"
          @click="handleSend(scope.$index, scope.row)">投递</el-button>
      </template>
    </el-table-column>

  </el-table>
  <!-- 详情窗口 -->
    <el-dialog
        title="岗位详情"
        :visible.sync="detileDialogVisible"
        width="50%"
    center>
    <!-- <el-descriptions title="岗位详情" :column="2" border>
                <el-descriptions-item label="岗位名称">{{selectRow.name}}</el-descriptions-item>
                <el-descriptions-item label="公司名称">{{selectRow.companyName}}</el-descriptions-item>
                <el-descriptions-item label="经验要求">{{selectRow.experience}}</el-descriptions-item>
                <el-descriptions-item label="学历要求">{{selectRow.qualification}}</el-descriptions-item>
                <el-descriptions-item label="工作地址">{{selectRow.address}}</el-descriptions-item>
                <el-descriptions-item label="待遇">{{selectRow.treatment}}</el-descriptions-item>
                <el-descriptions-item label="截止时间">{{selectRow.lastTime}}</el-descriptions-item>
                <el-descriptions-item label="标签">
                    <el-tag v-for="(item, index) in selectRow.postLab" :key="index" size="small" :type= "(index)%2 === 1 ? 'primary' : 'success'">{{ item }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="薪资">{{ selectRow.salaryFrom + "-" + selectRow.salaryTo + "每"+selectRow.way}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" border >
         <el-descriptions-item label="岗位要求">{{selectRow.require}}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" border>
        <el-descriptions-item label="岗位责任">{{selectRow.responsibility}}</el-descriptions-item>
    </el-descriptions> -->
    <CompanyPostDetail :selectRow="selectRow"/>
    </el-dialog>
    <!-- 编辑窗口 -->
    <el-dialog
        title="岗位编辑"
        :visible.sync="editDialogVisible"
        width="50%"
    center>
    <CompanyPostEdit ref="postEdit"  @saveEdit='saveEdit'></CompanyPostEdit>
    </el-dialog>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import CompanyPostEdit from '@/components/companyPost/CompanyPostEdit.vue'
import CompanyPostDetail from '@/components/companyPost/CompanyPostDetail.vue'
import qs from 'qs'
export default {
// import引入的组件需要注入到对象中才能使用
  components: { CompanyPostEdit, CompanyPostDetail },
  name: 'CompanyPostTable',
  props: {
    postInfoParam: {
      type: Array
    },
    height: {
    },
    selectionData: {
      type: Object
    }
  },
  data () {
    // 这里存放数据
    return {
      rid: 4,
      editType: '',
      detileDialogVisible: false,
      editDialogVisible: false,
      selectRow:
        {
          // id: 1,
          // companyName: 'sdas',
          // name: '养牛',
          // address: '花溪公园',
          // experience: '无需经验',
          // qualification: '本科',
          // requires: '要求有这样那样的',
          // treatment: '五险一金。。。。',
          // responsibility: '工作负责。。。。',
          // salaryFrom: '2000',
          // salaryTo: '9000',
          // way: '月',
          // lastTime: '2024-06-14',
          // // 标签是重要的筛查方式
          // postLab: [
          //   'python', 'java', 'mybatis', 'vue', 'mybatis-plus'
          // ]
        },
      local: 'right',
      // 标签数组
      lab: [{ text: 'java', value: 'java' }, { text: 'mysql', value: 'mysql' }, { text: 'springboot', value: 'springboot' }, { text: 'python', value: 'python' }],

      postInfo: [],
      pages: 1,
      queryData: {},
      loading: false
    }
  },
  // 监听属性 类似于data概念
  computed: {
    noMore () {
      return this.queryData.pageNo >= this.pages
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    initLab () {
      this.$get('/lab/getAllLab').then(res => {
        this.lab = res.data.map(item => { return { text: item.name, value: item.name } })
      })
    },
    initPostInfo () {
      // 加载第一页
      // this.postInfo = this.postInfoParam
      this.queryData = this.selectionData
      this.queryData.pageNo = 1
      this.$post('/post/queryPost', qs.stringify(this.queryData)).then(res => {
        console.log('初始岗位信息:', res)
        this.postInfo = res.data.list
        this.pages = res.data.pages
      })

      console.log('tableInfo', this.postInfo)
    },
    showDetil (row) {
      this.selectRow = row
      this.detileDialogVisible = true
    },
    // 手动查询数据
    getData () {
      this.queryData = this.selectionData
      this.queryData.pageNo = 1
      this.$post('/post/queryPost', qs.stringify(this.queryData)).then(res => {
        console.log('初始岗位信息:', res)
        this.postInfo = res.data.list
        this.pages = res.data.pages
      })
    },
    // 滚动加载数据
    load () {
      setTimeout(() => {
        this.loading = true
        if (this.queryData.pageNo <= this.pages) {
          this.queryData.pageNo++
          console.log('总页面数:', this.pages)
          console.log('当前页数:', this.queryData.pageNo)

          this.$post('/post/queryPost', qs.stringify(this.queryData)).then(res => {
            console.log('加载岗位信息:', res)
            this.postInfo = [...this.postInfo, ...res.data.list]
          })
        }
      }, 2000)

      // const data = [{
      //   id: 1,
      //   companyName: 'sdas',
      //   name: '刚才添加的',
      //   address: '花溪公园',
      //   experience: '无需经验',
      //   qualification: '本科',
      //   require: '要求有这样那样的',
      //   treatment: '五险一金。。。。',
      //   responsibility: '工作负责。。。。',
      //   salaryFrom: '2000',
      //   salaryTo: '9000',
      //   way: '月',
      //   lastTime: '2024-06-14',
      //   // 标签是重要的筛查方式
      //   postLab: [
      //     'python', 'java', 'mybatis'
      //   ]
      // }]
      // this.postInfo = [...this.postInfo, ...data]
    },
    onSubmit () {
      this.$message.success('查询成功:' + this.selectionDate.name)
    },
    handleEdit (index, row) {
      this.editDialogVisible = true

      this.$nextTick(() => {
        this.$refs.postEdit.rushInfo(row, 'update')
      })

      console.log('这一行数据为', row)
    },
    addPost () {
      this.editDialogVisible = true
      this.$nextTick(() => {
        this.$refs.postEdit.rushInfo({ companyName: this.$store.state.cname }, 'add')
      })
    },
    handleDelete (index, row) {
      const url = '/post/delete/' + row.id
      this.$get(url).then(res => {
        this.$message.success('删除岗位成功！')
        console.log('删除列:', row)
      })
    },
    // 投递岗位
    handleSend (index, row) {

    },
    filterTag (value, row) {
      // 从row中筛选出lab数组
    //   const lab = row.postLab.map((item, index) => {
    //     return Object.assign({}, { text: name, value: name })
    //   })
      const b = row.postLab.find(item => {
        return item === value
      })
      console.log(value)
      console.log(row)
      return b
    },

    saveEdit () {
      this.$post('/post/queryPost', qs.stringify(this.queryData)).then(res => {
        console.log('刷新岗位信息:', res)
        this.postInfo = res.data.list
        this.editDialogVisible = false
      })
    },
    initRid () {
      let rid = this.$store.state.userInfo.rid
      if (rid === null || rid === '') {
        rid = sessionStorage.getItem('userInfo').rid
      }
      this.rid = rid
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.initLab()
    this.initPostInfo()
    this.initRid()
    console.log('当前登录信息:', this.$store.state.userInfo)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

</style>
